<template>
  <div class="allBg">
    <el-container>
      <el-header class="header">登录</el-header>
      <el-main>
        <el-input v-model="username" class="username" maxlength="11" placeholder="请输入手机号" clearable></el-input>
        <el-input v-model="password" class="password" maxlength="20" placeholder="请输入密码" show-password clearable></el-input>

        <el-row class="select-row">
          <el-button class="register" type="text" @click="goTo('Register')">注册</el-button>
          <el-button class="loginOtp" type="text" @click="goTo('LoginOtp')">验证码登录</el-button>
        </el-row>

        <el-row class="login-row">
          <el-button @click="doLogin()" class="login" type="primary">登录</el-button>
        </el-row>
      </el-main>

      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    goTo(pageName) {
      this.$router.push("/" + pageName);
    },
    doLogin() {
      if (
        this.$common.isBlank(this.username) ||
        this.$common.isBlank(this.password)
      ) {
        this.$common.msg("手机号和密码都不能为空");
      }
    }
  }
};
</script>

<style>
.username {
  margin-top: 100px;
  width: 80% !important;
  font-size: 16px;
}
.username input {
  height: 60px !important;
}
.password {
  margin-top: 10px;
  width: 80% !important;
  font-size: 16px;
}
.password input {
  height: 60px !important;
}

.select-row {
  width: 80%;
  margin: 0 auto;
}
.register {
  margin-top: 10px;
  font-size: 18px;
  color: #ecd3d3;
  float: left;
  margin-left: 5px;
}
.loginOtp {
  margin-top: 10px;
  font-size: 18px;
  color: #ecd3d3;
  float: right;
  margin-right: 5px;
}
.login-row {
  width: 80%;
  margin: 0 auto;
}
.login {
  margin-top: 10px;
  font-size: 16px;
  padding: 12px 30px;
  width: 100%;
}
</style>
